<template lang="jade">
div
	div.return-bar(@click="back()")
		i.iconfont &#xe668;
		div.limitedname {{{item.name}}}

	div.detail-page

		ul.productlist.detail_top
			li
				div.title
					span.name {{item.name}}
					span.fr 起投金额:100元
				flexbox
					flexbox-item(style="-ms-flex: 1.7;flex: 1.7;-webkit-box-flex: 1.7;")
						span 借款金额
						b {{item.account}}元
					flexbox-item
						span 约定收益率
						b.mtxt {{item.borrow_apr}}%
					flexbox-item
						span 借款期限
						b {{item.borrow_period}}{{item.borrow_period_str}}

					flexbox-item
						a.p_btn_nob.tcenter {{item.status_str}}

				flexbox
					flexbox-item(:span="6",  style=" min-width:110px;")
						剩余可投金额:{{item.borrow_account_wait}}元
					flexbox-item
						progress(:percent="item.borrow_account_scale", :show-cancel="false")
					flexbox-item(:span="2")
						span.mtxt {{item.borrow_account_scale}}%



		ul.productdetail
			li
				i.iconfont &#xe6e0;
				span 还款方式
				span.fr {{item.borrow_style}}

			li
				i.iconfont &#xe644;
				span 已投人数
				span.fr {{item.number_of_bidders}}人

			li
				i.iconfont &#xe646;
				span 募资时间
				span.fr  {{item.time}}

			li
				i.iconfont &#xe645;
				span 保障方式
				span.fr {{item.guarantee}}

		ul.cbox.hl.producthl(style="margin-bottom: 5rem;")
			li
				a(v-link="{ path: '/invest/detail-sub/1?borrow_nid='+item.borrow_nid }")
					i
						img(src="../../assets/images/invest/detail-hl-icon1.png")
					span 借款信息
			li(v-link="{ path: '/invest/guarantee/'+item.borrow_nid }")
				a
					i
						img(src="../../assets/images/invest/detail-hl-icon2.png")
					span 还款保障
			li
				a(v-link="{ path: '/invest/detail-sub/3?borrow_nid='+item.borrow_nid }")
					i
						img(src="../../assets/images/invest/detail-hl-icon3.png")
					span 投资记录
			li
				a(v-link="{ path: '/invest/detail-sub/4?borrow_nid='+item.borrow_nid }")
					i
						img(src="../../assets/images/invest/detail-hl-icon4.png")
					span 还款计划



		section.form
			div
				div.postForm
					input.money(name="money",v-model="money",placeholder="请输入100的整数倍数，最低100元",autocomplete="off")
					input(type="hidden",name="borrow_nid",v-model="borrow_nid")
					span.rmb 元
					ul.cbox
						li.balance
							span 可用余额￥
								b {{banlance}}
								元
							//span.est 10,000元3个预计收282.51元
						li.btn
							button(v-bind:class="postBtn.class", v-bind:disabled="postBtn.disabled",  type="button",  @click="onSubmit()") {{postBtn.txt}}



form-page(:url.sync="postBank.url"  , :rdata.sync="postBank.data")
com-alert(:show.sync="alertData.show", :title.sync="alertData.title", :buttontxt.sync="alertData.buttontxt", :content.sync="alertData.content")
loading(:show="show_loading", text="正在加载")
div.repd
	common-dialog(v-show="showDialog", @update:setparent=" setparent ", :close="true")
		div.redpack
			div.title 可用红包
			div.note 系统会自动为您选择激活红包最大收益的匹配方案，若您想激活其余红包，则需要增加相应的投资金额。
			div.con
				coupon(:items="redlist")

			ul.ux_row(style="padding:5px 10px;font-size:14px;")
				li.ux_flex
					投资金额:
					b.tred {{money}}元
				li.ux_flex
					激活红包:
					b.tred {{redPackData.reward}}元

			ul.ux_row
				li.ux_flex.tcenter
					input.p_btn_nob(type="button", value="充值", @click="goR()")
				li.ux_flex.tcenter
					button(v-bind:class="subBtn.class", v-bind:disabled="subBtn.disabled",   @click="goTender()") {{subBtn.txt}}

</template>




<script>



import '../../assets/sass/invest/invest.scss'
import {Api_Recharge, c_borrow_detail, c_order_detail,Api_Tender} from '../../config/api'

import {Loading, Progress, Flexbox, FlexboxItem} from 'vux'
import FormPage from '../../components/common/form'
import ComAlert from '../../components/common/alert'
import { mapGetters, mapActions } from 'vuex'

import investOjb from '../../controller/invest';
import api from '../../data/api'
import CommonDialog from "../../components/dialog";  //弹窗插件
import Coupon from "../../components/coupon";
export default {

	data () {
		return {

			subBtn:{txt:'确认投标',class:'p_btn', disabled:false},
			postBtn:{txt:'立即投标', class:'', disabled:false},
			postForm:{},
			postBank:{
				url:'',
				data:{
					RequestData:'',
					transCode:''
				}
			},
			redlist: [],

			show_loading:false,
            alertData:{
                show:false,
                title:'标题',
                buttontxt:'确定',
                content:'sign'
            },
			from:'',
			borrow_nid: '',
			typeId:'',
			item: '',
			money: '',
			banlance: 0,
			busy:false,
			wx_share:{"title":'', "link":window.location.href, "img":'http://www.uximoney.com/themes/blue/img/logo-temp.png', "desc":''}
		}
	},

    computed: {
      ...mapGetters([
		  'showDialog', 'redPackData'
      ])
	},

	components: {
		Coupon,
		CommonDialog,
		ComAlert,
		FormPage,
		Progress,
		Flexbox,
		FlexboxItem,
		Loading
	},
	methods: {

		isInteger(obj) {
			return Math.floor(obj) == obj
		},

		verMoney(){
			if(this.money == '') return 0;
			if(this.money == undefined) return 0;
			if(this.money == null) return 0;
			if(this.isInteger(this.money) == false) return 0;
			this.money = parseInt(this.money);
			if(this.money < 100) return 1;
			return 2;
		},

		goR(){
			this.$route.router.go('/recharge_guide');
		},
		back(){
			if(this.from==undefined || this.from=='' || this.from==null)
				this.$route.router.go('/invest/index?productype=current');
			else
				this.$route.router.go(this.from);
		},

		setparent(params){
			this.$store.dispatch('setShowDialog', params.status)
		},

		process(key, close){

			if(close){
				this.$store.dispatch('setShowLoading', true), this.busy = true;
			}else{
				this.$store.dispatch('setShowLoading', false), this.busy = false;
			}

			switch (key) {
				case 1:
					if(close){
						this.postBtn.txt = '正在处理', this.postBtn.class = 'grey_btn', this.postBtn.disabled = true;
					}else{
						this.postBtn.txt = '立即投标', this.postBtn.class = '', this.postBtn.disabled = false;
					}
					break;
				case 2:
					if(close){
						this.subBtn.txt = '正在处理', this.subBtn.class = 'grey_btn', this.subBtn.disabled = true;
					}else{
						this.subBtn.txt = '确认投标', this.subBtn.class = 'p_btn', this.subBtn.disabled = false;
					}
					break;
			}
		},

		async goTender(){


			var vm = this;
			if (this.busy) return;

			var am = parseInt(this.money), bm = parseInt(this.redPackData.tender);

			if( am < bm ){
				this.alertData = { show: true, title: '信息提示', buttontxt: '确定', content: '投标金额小于活动条件金额,请重新选择红包!' };
				return;
			}

			var data = {'borrow_nid': this.borrow_nid, 'money': this.money, 'couponArr':this.redPackData.id, 'ajax': '1'}
			this.process(2, true);
			var res = await investOjb.tender(data); //直接投标
			if(res.status == false) this.process(2, false);
		},

		async onSubmit() {
			var vm = this;
			if(this.busy) return;

			var rnum = this.verMoney();
			if(rnum == 0){
				this.alertData = { content: '金额输入有问题,请重新输入!', show: true, title: '信息提示', buttontxt: '确定'};
				return;
			}

			if(rnum == 1){
				this.alertData = { content: '金额请输入大于等于100元以上, 谢谢!', show: true, title: '信息提示', buttontxt: '确定'};
				return;
			}

			var data = {'borrow_nid': this.borrow_nid, 'money': this.money, 'ajax': '1'}
			this.process(1, true);
			/* var res = await investOjb.getRedPack(data);
			console.log(res)
			if(res.status == false){
				res = await investOjb.tender(data);
				if(res.status == false) this.process(1, false);
			}else{
				this.process(1, false);
			} */



			var res = await investOjb.tender(data);
			if(res.status == false) this.process(1, false);
		},

		async fetch() {
			var that = this;

			var params = {'borrow_nid':this.borrow_nid};
			this.$store.dispatch('setShowLoading', true);
			var res = await api.invest.loan_detail(params);

			this.$store.dispatch('setShowLoading', false);
			that.item = res.data;
			that.banlance = res.banlance;
			document.title = that.item.name + " - 有喜财富投标理财";

			//微信分享
			this.wx_share.desc = "年利率:"+that.item.borrow_apr + "%, 期限:"+that.item.borrow_period + that.item.borrow_period_str;
			this.wx_share.title = "我在有喜发现了一个不错的理财项目，你也来看看吧！"
			this.wx_share.img = that.item.borrow_pawn_app_url;
			this.global.wxset(this.wx_share);

		}
	},
	route: {
		/*data:function(){
			document.title = "有喜财富 - 手机版" ;
		},*/
		activate ( transition ) {
			//this.$store.dispatch('setShowDialog', true);
			//初始化
			investOjb.init({eventBus:this});

			this.borrow_nid = transition.to.params.detailId
			this.typeId = transition.to.params.typeId
			this.from = transition.to.query.from
			transition.next();
			this.fetch()

			this.$store.dispatch('setShowDialog', false);


		}
	}
}
</script>

<style lang="scss" scoped>
.grey_btn{
	background-color:#999!important;
}



.vux-flex-row{
	display: flex;
	display: -webkit-flex;
	-webkit-align-items:center;

}

.vux-flexbox-item{
	display: block;
	width:100%;
}


</style>


<style lang="scss">
.repd{
	.dialog.active{
		width:95%!important;
	}

	.redpack{
		background-color:#fff;


		.title{
			font-size:16px;
			padding:5px 10px;
		}

		.note{
			font-size:12px;
			margin-bottom:10px;
			padding:0px 10px;
		}
		.con{
			background-color:#f4f8fb;
			padding:10px;
			padding-bottom:1px;
			height: 200px;
    		overflow-y: scroll;
		}

		.ux_flex{
			padding:5px 0px;
		}
		input, button{
			width:80%;
			padding:8px 0px;
			font-size:14px;
			&.p_btn{
				border:none;
			}
			&.grey_btn{
				color:#fff;
				border:none;
				border-radius: .1rem;
				background-color:#999!important;
			}

		}

		.coupon li .tag span{
			font-size:14px;
		}
		.coupon li .tag strong{
			    font-size: 16px;
		}
		.coupon li .info{
			width:56%;
		}
	}
}
</style>
